<template>
  <div class="video-item">
    <vue3VideoPlay
      v-bind="options"
      @play="onPlay"
      @timeupdate="onTimeupdate"
      :height="videoHeight"
      :width="videoWidth"
      ref="player"
      v-if="videoModel"
    >
    </vue3VideoPlay>
    <video
      :height="videoHeight"
      :width="videoWidth"
      controls
      id="video"
      muted
      v-if="!videoModel"
      :poster="props.video.firstImgUrl"
      ref="videoRef"
      style="background: #000"
      playsinline="true"
      webkit-playsinline="true"
      x5-playsinline="true"
      x5-video-orientation="portraint"
      x5-video-player-fullscreen="true"
      x5-video-player-type="h5"
      @timeupdate="onTimeupdate1"
      controlsList="nodownload"
      @play="onPlay1"
    >
      <source :src="videoUrl" type="video/ogg" />
      <source :src="videoUrl" type="video/mp4" />
      您的浏览器不支持此种视频格式。
    </video>

    <div id="vmain"></div>

    <div
      style="
        text-align: left;
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
      "
      :class="{ mobile: props.mobile === 'false' ? false : true }"
    >
      <div>
        <el-button @click="changeVideo">切换类型</el-button>
      </div>
      <div
        class="oper"
        :class="{ fontM: props.mobile === 'false' ? true : false }"
      >
        <div style="color: #1296db">
          <img src="@/assets/icon/look.png" alt="" class="item-icon" />
          浏览&nbsp;{{ tool.numberTo(lookCount) }}
        </div>
        <div
          v-if="!props.hobby.isLike"
          @click="like(props.video.id, 1)"
          class="item"
        >
          <img src="@/assets/icon/aixin5.png" alt="" class="item-icon" />
          点赞&nbsp;{{ tool.numberTo(likeCount) }}
        </div>
        <div
          v-else
          style="color: #d81e06"
          class="item"
          @click="like(props.video.id, 2)"
        >
          <img src="@/assets/icon/aixin4.png" alt="" class="item-icon" />
          已点赞&nbsp;{{ tool.numberTo(likeCount) + 1 }}
        </div>
        <div
          v-if="!props.hobby.isCollect"
          class="item"
          @click="collect(props.video.id, 1)"
        >
          <img src="@/assets/icon/shouc4.png" alt="" class="item-icon" />
          收藏&nbsp;{{ tool.numberTo(collectionCount) }}
        </div>
        <div
          v-else
          style="color: #f5c707"
          class="item"
          @click="collect(props.video.id, 2)"
        >
          <img src="@/assets/icon/shouc5.png" alt="" class="item-icon" />
          已收藏&nbsp;{{ tool.numberTo(collectionCount) + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  defineProps,
  reactive,
  ref,
  defineEmits,
  onMounted,
} from "vue";
// import { Star } from "@element-plus/icons-vue";
import tool from "@/assets/js/tool";

const emits = defineEmits(["like", "collect", "open"]);
const props = defineProps({
  video: {
    type: Object,
    default: () => {},
  },
  mobile: {
    type: String,
    default: "false",
  },
  type: {
    type: Boolean,
    default: false,
  },
  hobby: {
    type: Object,
    default: () => {},
  },
});

const player = ref();
const videoModel = ref(true);
const videoRef = ref();

const likeCount = computed(() => props.video.thumbUp);
const collectionCount = computed(() => props.video.collection);
const lookCount = computed(() => props.video.lookCount);

const changeVideo = () => {
  videoModel.value = !videoModel.value;
};

const videoHeight = computed(() =>
  props.mobile === "false" ? "300px" : "700px"
);
const videoUrl = ref();
const videoWidth = computed(() => (props.mobile === "false" ? "100%" : "70%"));

const options = reactive({
  color: "#000", //主题色
  muted: true, //静音
  webFullScreen: false,
  speedRate: [
    "0.75",
    "1.0",
    "1.25",
    "1.5",
    "2.0",
    "3.0",
    "5.0",
    "10.0",
    "15.0",
  ], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0, //默认音量大小
  control: true, //是否显示控制器
  title: "", //视频名称
  type: "video/mp4",
  // src: "http://vjs.zencdn.net/v/oceans.mp4", //视频源
  src: videoUrl.value,
  poster: props.video.firstImgUrl,
  speed: props.type,
  controlsList: "nodownload",
});
const onPlay = (ev) => {
  if (!props.type) {
    if (ev.target.currentTime >= 10) {
      player.value.pause();
      emits("open");
    }
  }
};
const onPlay1 = (ev) => {
  if (!props.type) {
    if (ev.target.currentTime >= 10) {
      videoRef.value.pause();
      emits("open");
    }
  }
};

const onTimeupdate = (ev) => {
  if (!props.type) {
    if (ev.target.currentTime >= 10) {
      player.value.pause();
      emits("open");
    }
  }
};

const onTimeupdate1 = (ev) => {
  if (!props.type) {
    if (ev.target.currentTime >= 10) {
      videoRef.value.pause();
      emits("open");
    }
  }
};

const like = (id, model) => {
  emits("like", id, model);
};

const collect = (id, model) => {
  emits("collect", id, model);
};

async function convertToBlob() {
  const response = await fetch(props.video.videoUrl, {});
  const buffer = await response.arrayBuffer();
  const blob = new Blob([buffer], { type: "video/mp4" });
  console.log("xxxxxxxxxx", blob);
  const url = URL.createObjectURL(blob);
  videoUrl.value = url;
}

onMounted(() => {
  convertToBlob();
});
</script>

<style scoped lang="scss">
.video-item {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile {
  width: 70% !important;
}

.oper {
  display: flex;
  align-items: center;
  & > div {
    display: flex;
    align-items: center;
    color: #bfbfbf;
    margin-left: 15px;
    justify-content: end;
  }
}

.fontM {
  font-size: 10px !important;
}

.item-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.item:hover {
  cursor: pointer;
}
#video::-webkit-progress-bar,
#video::-webkit-progress-value,
#video::-webkit-slider-runnable-track,
#video::-webkit-slider-thumb {
  display: none; /* 隐藏进度条和滑块 */
}

#video::-moz-progress-bar {
  display: none; /* 隐藏进度条（如果是Mozilla浏览器） */
}
</style>
